<div class="container-fluid" ng-controller="sysRoleCtrl">

    <!-- Page Heading -->
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">
                角色
                <small>管理</small>
            </h1>
        </div>
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-lg-12">
            <div id="toolbar" class="btn-group">
                <button id="accountCreate" type="button" class="btn btn-primary" data-toggle="modal">新增角色</button>
            </div>
            <table id="table" data-toggle="table" data-pagination="true" data-toggle="table" data-search="true" data-show-refresh="true"
                data-show-toggle="true" data-show-columns="true" data-toolbar="#toolbar">
                <thead>
                    <tr>
                        <th data-field="name">角色名称</th>
                        <th data-field="comments">描述</th>
                        <th data-field="option" data-formatter="actionFormatter" data-events="actionEvents">操作</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="modal fade" id="roleSetAuth">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">设置权限</h4>
                </div>
                <div class="modal-body" id="authTree">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" ng-click="saveRoleAuth(currentRow)">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <div class="modal fade" id="addRole">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">新增角色</h4>
                </div>
                <form name="addForm" ng-submit="saveRole('add',addForm.$valid)" class="form-horizontal">
                    <div class="modal-body">
                        <div class="panel">
                            <div class="panel-body">
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <label class="col-lg-4 col-md-4 control-label">角色名称：</label>
                                        <div class="col-lg-7 col-md-7">
                                            <input name="name" type="text" class="form-control" ng-model="saveData.name" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-4 col-md-4 control-label">说明：</label>
                                        <div class="col-lg-7 col-md-7">
                                            <input name="comments" type="text" class="form-control" ng-model="saveData.comments">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <!-- /.modal -->
    <div class="modal fade" id="editRole">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">编辑角色</h4>
                </div>
                <form name="editForm" ng-submit="saveRole('edit',editForm.$valid)" class="form-horizontal">
                    <div class="modal-body">
                        <div class="panel">
                            <div class="panel-body">
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <label class="col-lg-4 col-md-4 control-label">角色名称：</label>
                                        <div class="col-lg-7 col-md-7">
                                            <input name="name" type="text" class="form-control" ng-model="editData.dto.name" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-4 col-md-4 control-label">说明：</label>
                                        <div class="col-lg-7 col-md-7">
                                            <input name="comments" type="text" class="form-control" ng-model="editData.dto.comments">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>
<!-- /.container-fluid -->

<script>

function actionFormatter(value) {
    return [
        '<button class="btn btn-default edit">编辑</button>' ,
        '<button class="btn btn-default setAuth"> 设置权限</button>' ,
        '<button class="btn btn-danger delete"> 删除</button>'
    ].join('');
}

window.actionEvents = {
     //公司详情页面
    'click .delete': function (e, value, row) {
        console.log(row._id)
        swal({
            title: "确认删除?",
            text: "是否确认删除该角色？",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            cancelButtonText: "取消",
            confirmButtonText: "确认",
            showLoaderOnConfirm: true,
            closeOnConfirm: false
        },function () {
            var $scope = angular.element(document.querySelector('[ng-controller=sysRoleCtrl]')).scope();
            $scope.deleteRole(row._id)
        });
    },
    //公司修改页面
    'click .edit': function (e, value, row) {
        var $scope = angular.element(document.querySelector('[ng-controller=sysRoleCtrl]')).scope();
        var data = $.extend({}, row); 
        $scope.editData = {
            _id:data._id,
            dto:data
        }
        delete $scope.editData.dto._id
        $scope.$apply()
        $('#editRole').modal()
    },
    'click .setAuth': function (e, value, row) {
        var $scope = angular.element(document.querySelector('[ng-controller=sysRoleCtrl]')).scope();
        $scope.currentRow = ""
        $scope.currentRow = row
        $scope.$apply()
        $scope.showAuthList($scope.currentRow)
    }
};

</script>